/**
 * @format
 */
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import px2dp from '../utils/px2dp';
import tabOpts from './MainTab';

const tabOptions = {
  lazy: true,
  tabBarOptions: {
    activeTintColor: '#EB0029',
    inactiveTintColor: 'rgba(0, 0, 0, 0.43)',
    labelStyle: {
      fontSize: px2dp(20),
      marginTop: px2dp(14),
      marginBottom: px2dp(9),
      fontWeight: 'bold',
    },
    // 选项卡的默认样式
    tabStyle: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    allowFontScaling: true,
  },
  swipeEnabled: true,
  initialRouteName: 'Home',
  tabBarPosition: 'bottom',
  swipeVelocityImpact: 0.1,
};

const Tab = createBottomTabNavigator();
export default () => (
  <Tab.Navigator {...tabOptions}>
    {Object.keys(tabOpts)?.map((name) => (
      <Tab.Screen name={name} key={name} {...tabOpts[name]} />
    ))}
  </Tab.Navigator>
);
